<template>
    <div class="app-container">
      <el-form :inline="true"  class="demo-form-inline">
              
        <el-select v-model="searchMap.where.openType" class="filter-item" placeholder="开放类型" clearable>
          <el-option
            v-for="item in openTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
  
        <el-date-picker
          v-model="searchMap.where.startTime"
          class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="考试开始时间"
        />
  
        <el-date-picker
          v-model="searchMap.where.endTime"
          class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="考试结束时间"
        />
  
        <el-input v-model="searchMap.where.title" placeholder="搜索考试名称" style="width: 200px;" class="filter-item" />
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button type="primary" @click="examadd()">添加</el-button>
      </el-form>

      <el-table :data="examList" stripe style="width: 100%" ref="repotable">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="title" label="考试名称" width="200">
        </el-table-column>
        <el-table-column prop="openType" label="考试类型">
          <!-- <template slot-scope="scope">
            <div>{{ scope.row.openType | examOpenType }}</div>
          </template> -->
        </el-table-column>
        <el-table-column label="时间限制" width="300">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.timeLimit == 0
                  ? "不限制"
                  : scope.row.startTime + "~" + scope.row.endTime
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="totalScore" label="考试总分"> </el-table-column>
        <el-table-column prop="qualifyScore" label="及格线"> </el-table-column>
        <el-table-column prop="qualifyScore" label="考试状态"> 
              <!-- <template slot-scope="scope">
                  <div>{{scope.row.state | examStateFilter}}</div>
              </template> -->
        </el-table-column> 
        <el-table-column label="操作" width="200">
          <div slot-scope="scope">
            <el-button
              @click="del(scope.row.id)"
              size="small"
              type="danger"
              icon="el-icon-delete"
              round
            >删除</el-button>
            <el-button
              @click="edit(scope.row.id)"
              size="small"
              type="primary"
              icon="el-icon-edit"
              round
            >修改</el-button>
          </div>
        </el-table-column>
      </el-table>
    <br/>
    <el-pagination
    style="float:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.now"
      :page-sizes="[5, 10, 50, 100]"
      :page-size="searchMap.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    </div>
  </template>
  <script>
   import {findAll,del} from "@/api/exam";
  export default {
    data() {
      return {
        examList:[],
        openTypes:[
          {
              value:1,
              label:"完全开放"
          },
          {
              
              value:2,
              label:"部门开放"
          }
        ],  
        searchMap: {
          now: 1,
          size: 3,
          where: {
            title: "",
            openType:"",
            startTime:"",
            endTime:""
          },
        },
        total:0,
        dialogFormVisible:false,
        form:{}
      
        // examList: [],
        // total: 0,
        // dialogFormVisible: false,
        // repoForm: {
        //   title: "",
        //   remark: "",
        // },
      };
    },
    methods: {
      examadd(){
        this.$router.push({
                  path: "/exam/add",
                  query: {},
                });
      },
      search(){
        findAll(this.searchMap).then((res)=>{
          console.log(res);
          this.examList = res.list;
          this.total = res.total
          
        })
      },

      handleSizeChange(size){
        this.searchMap.size = size;
        this.search();
      },

      handleCurrentChange(page){
        this.searchMap.now = page;
        this.search();
      },
  
      save() {
        add(this.repoForm).then((res) => {
          if (res.code == 0) {
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
            });
          } else {
            this.$notify({
              title: "失败",
              message: res.msg,
              type: "error",
            });
          }
  
          //刷新表格
          this.search();
  
          //hide dialog
          this.dialogFormVisible = false;
        });
      },
      edit(id) {
        this.$router.push({
                  path: "/exam/update",
                  query: {examId:id},
                });
      },
      del(id) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            del(id).then((res) => {
              if (res.code == 0) {
                this.$notify({
                  title: "删除成功",
                  message: res.msg,
                  type: "success",
                });
              } else {
                this.$notify({
                  title: "删除失败",
                  message: res.msg,
                  type: "error",
                });
              }
  
              //刷新表格
              this.search();
            });
          })
          .catch(() => {});
      },
  
      delBatch() {
        //获取ids
        console.log(this.$refs.repotable.selection);
        var ids = [];
        this.$refs.repotable.selection.forEach((item) => {
          ids.push(item.id);
        });
  
        console.log(ids);
        //交互
        delBat(ids).then((res) => {
          if (res.code == 0) {
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
            });
          } else {
            this.$notify({
              title: "失败",
              message: res.msg,
              type: "error",
            });
          }
        });
        this.search();
      },
  
      handleSizeChange(size) {
        //pageSize 改变时会触发
        this.searchMap.size = size;
        this.search();
      },
      handleCurrentChange(page) {
        //currentPage 改变时会触发
        this.searchMap.now = page;
        this.search();
      },
  
      goExamAdd(){
          this.$router.push({name:"examview"})
      }
    },
    created() {
      this.search();
    },
  };
  </script>